{include file="User@Public:header"/}
{include file="User@Public:nav"/}
<link rel="stylesheet" href="__PUBLIC__/plugs/cropper/cropper.min.css">
<script type="text/javascript" src="__PUBLIC__/plugs/cropper/cropper.min.js"></script>
<div class="container">
	<div class="row">
		<div class="col-md-2">
			{include file="User@Public:left_menu"/}
		</div>
		<div class="col-md-10 cf">
			<div class="panel panel-default cf">
				<div class="panel-heading">
					<h3 class="panel-title">更改头像</h3>
				</div>
				<div class="panel-body">
					<div class="row">
					  <div class="col-md-9">
					    <div class="img-container">
					      <img src="{:avatar($user['uid'],'big')}" alt="Picture">
					    </div>
					  </div>
					  <div class="col-md-3">
					    <div class="docs-preview clearfix">
					      <div class="img-preview preview-lg">{:avatar($user['uid'],'big')}</div>
					      <div class="img-preview preview-md">{:avatar($user['uid'],'middle')}</div>
					      <div class="img-preview preview-sm">{:avatar($user['uid'],'small')}</div>
					    </div>
					  </div>
					</div>
					<div class="row" id="actions">
					  <div class="col-md-9 docs-buttons">
					    <div class="btn-group">
					      <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
					        <span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoom(0.1)">
					          <span class="fa fa-search-plus"></span> 放大
					        </span>
					      </button>
					      <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
					        <span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoom(-0.1)">
					          <span class="fa fa-search-minus"></span> 缩小
					        </span>
					      </button>
					    </div>

					    <div class="btn-group">
					      <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left">
					        <span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotate(-45)">
					          <span class="fa fa-rotate-left"></span> 反旋转45
					        </span>
					      </button>
					      <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right">
					        <span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotate(45)">
					          <span class="fa fa-rotate-right"></span> 顺旋转45
					        </span>
					      </button>
					    </div>

					    <div class="btn-group">
					      <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal">
					        <span class="docs-tooltip" data-toggle="tooltip" title="cropper.scaleX(-1)">
					          <span class="fa fa-arrows-h"></span> 左右翻转
					        </span>
					      </button>
					      <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="Flip Vertical">
					        <span class="docs-tooltip" data-toggle="tooltip" title="cropper.scaleY(-1)">
					          <span class="fa fa-arrows-v"></span> 上下翻转
					        </span>
					      </button>
					    </div>

					    <div class="btn-group">
					      <button type="button" class="btn btn-primary" data-method="reset" title="Reset">
					        <span class="docs-tooltip" data-toggle="tooltip" title="重置图片">
					          <span class="fa fa-refresh"></span> 重置
					        </span>
					      </button>
					      <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
					        <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
					        <span class="docs-tooltip" data-toggle="tooltip" title="上传图片">
					          <span class="fa fa-upload"></span> 上传
					        </span>
					      </label>
					    </div>
					  </div><!-- /.docs-buttons -->

					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="__PUBLIC__/plugs/cropper/cropper.custom.js"></script>
{include file="User@Public:footer"/}